import { useContext, useEffect, useState } from "react";
import "./style.css";
import Tabselect from "../../assets/bigTab/tab-select.png";
import TabUnselect from "../../assets/bigTab/tab-unselect.png";
import { PlanInfoChildContext } from "../../pages/PlantInfo/plantInfo";
import { diva } from "../../global";
import Layout from "../Layout";

const SwitchTab = (props) => {
  const [tabIndex, setTabIndex] = useState(5);
  // const { setParent } = { setParentProps };
  const { setParentProps } = props;
  let change = true;
  const { title } = props;
  const { index } = props;
  const { nameChange } = props;
  const {layout}=props;
  const changeTheScene = (title) => {
    if (change === true && index !== 1) {
      diva.client?.applyScene(`${title.substring(0, 2) + "权属"}`);
      return;
    } else if (index === 1) {
      diva.client?.applyScene(`${title + "监测"}`)
      .then((res)=>console.log(res))
      .catch((err) => console.log(err));

    }
  };

  const chilrenIndex = (val) => {
    
    if(val===undefined) {

   }
    setTabIndex(5);
    setParentProps(5, val);
  };
  useEffect(() => {
    function findIndex(name) {
        if(name){
            let res = title.find((val) => {
                if (val.name === name) {
                  return val.id;
                } else {
                  return;
                }
              });
              return res?.id;
        }
        else{
            return 0;
        }
      
    }

    setParentProps(findIndex(nameChange), nameChange);
    setTabIndex(
      props.nameChange === "铜鼓镇"
        ? 4
        : props.nameChange === "南腰界镇"
        ? 2
        : props.nameChange === "花田乡"
        ? 1
        : props.nameChange === "涂市镇"
        ? 0
        : props.nameChange === "李溪镇"
        ? 3
        : 5
    );
  },[props.nameChange]);

  return (
    <div>
    <Layout index={index} showIndex={chilrenIndex} />
    {layout&&(  <div className="tab-container">
        <div className="tab-box">
          {title.map((item, index) => (
            <div
              key={index}
              className="single-tab"
              onClick={() => {
                setParentProps(item.id, item.name);
                setTabIndex(index);
                change = false;
                changeTheScene(item.name);
              }}
              style={{
                color: index === tabIndex ? "#fff" : "#9EBBCB",
                backgroundImage:
                  index === tabIndex
                    ? `url(${Tabselect})`
                    : `url(${TabUnselect})`,
              }}
            >
              {item.name}
            </div>
          ))}
        </div>
      </div>)}
    </div>
  );
};
export default SwitchTab;
